<template>
  <div class="container">
    <!-- box1 -->
    <el-card class="box_card box1">
      <el-row class="" :gutter="10">
        <el-col class="box1_conent" :span="8">
          <p style="font-size: 14px">账户余额</p>
          <p class="box1_number">{{ balance }}</p>
        </el-col>
        <el-col class="box1_conent" :span="8">
          <p style="font-size: 14px">计量点数</p>
          <p class="box1_number">12312.63</p>
        </el-col>
        <el-col class="box1_conent_img" :span="8">
          <!-- <img src="/img/chongzhi.png" alt="" /> -->
          <!-- <p style="font-size: 14px">计量点数</p> -->
          <el-button type="text" @click="dialogVisible = true"
            >线下充值</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <!-- box2 -->
    <el-card class="box_card box2">
      <!-- 结算账户名称 -->
      <el-row :gutter="10">
        <el-col :span="12">结算账户名称 : {{ accountName }}</el-col>
        <el-col style="float: right" :span="3">
          <span style="cursor: pointer" @click="printShow = true"
            >打印账单</span
          ></el-col
        >
      </el-row>
      <!-- room -->
      <el-row style="margin-top: 10px" :gutter="10">
        <el-col :span="6">
          联系人 : {{ contactName }}/{{ contactMobile }}
        </el-col>
        <!-- 计量点 -->
        <el-col :span="8">
          计量点:
          <el-select
            style="margin-left: 5px"
            size="mini"
            v-model="room"
            placeholder="请选择"
          >
            <el-option label="1" value="1"> </el-option>
            <el-option label="2" value="2"> </el-option>
            <el-option label="3" value="3"> </el-option>
            <!-- <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option> -->
          </el-select>
        </el-col>
        <!-- 时间 -->
        <el-col :span="10">
          时间:
          <el-date-picker
            size="mini"
            v-model="time"
            @change="getTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-col>
      </el-row>
    </el-card>
    <!-- box3 -->
    <el-card class="box_card box3">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="支出" name="income"></el-tab-pane>
        <el-tab-pane label="收入" name="spend"></el-tab-pane
      ></el-tabs>
      <avue-crud
        :data="data1"
        :option="option"
        :page.sync="page"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
        <template slot="tenantId" slot-scope="scope">
          <div
            :style="{ color: activeName == 'income' ? '#F56C6C' : '#67C23A' }"
          >
            {{ scope.row.tenantId }}
          </div>
        </template>
      </avue-crud>
    </el-card>
    <!-- dialog -->
    <el-dialog
      :modal-append-to-body="false"
      title="线下充值"
      :visible.sync="dialogVisible"
      width="480px"
      :before-close="handleClose"
      :close-on-click-modal="true"
    >
      <el-form :rules="rules" ref="ruleForm" :model="form">
        <el-form-item
          class="form_item"
          label="当前卡余额 : "
          :label-width="formLabelWidth"
        >
          <span>￥&nbsp;</span>
          <span>{{ balance }}</span>
        </el-form-item>
        <el-form-item
          class="form_item"
          label="变动值 : "
          :label-width="formLabelWidth"
          prop="amount"
        >
          <span>￥&nbsp;</span>
          <el-input
            style="width: 90%"
            v-model="form.amount"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="form_item"
          label="调整后 : "
          :label-width="formLabelWidth"
        >
          <span>￥&nbsp;</span>
          <span>{{ form.amount ? residual : "--" }}</span>
        </el-form-item>
        <el-form-item
          class="form_item"
          label="备注信息 : "
          :label-width="formLabelWidth"
        >
          <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-input
            style="width: 90%"
            v-model="form.remarks"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <div class="tips-wrapper">
          <p>温馨提示</p>
          <div>1、调整前请和租客协商一致；</div>
          <div>2、调整卡余额租客将会收到短信和微信通知。</div>
        </div>
      </el-form>
      <!-- btn -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getRecharge">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="diao"
      title="账单打印预览"
      :visible.sync="printShow"
      width="70%"
      :append-to-body="true"
      :before-close="handleClose1"
      center
    >
      <print></print>
      <!-- <span slot="footer" class="dialog-footer"> -->
      <!-- <el-button @click="printShow = false">取 消</el-button> -->
      <!-- <el-button type="primary" @click="print">打 印</el-button> -->
      <!-- </span> -->
    </el-dialog>
  </div>
</template>

<script>
import {
  getCheckFee,
  getRecharge,
  getFeeDetailList,
} from "@/api/meter/checkCost";
import { dateFormat } from "@/util/date";
import { validatenum } from "@/util/validate";
import print from "./print";
export default {
  name: "checkCost",
  components: {
    print,
  },
  data() {
    let checkAmount = (rule, value, callback) => {
      if (validatenum(value, 1)) {
        return callback(new Error("请输入非0有效数字"));
      } else {
        callback();
      }
    };
    return {
      printShow: false,
      data1: [],
      option: {
        addBtn: false,
        menu: false,
        columnBtn: false,
        refreshBtn: false,
        align: "center",
        menuAlign: "center",
        column: [
          {
            label: "时间",
            prop: "meterDay",
          },
          {
            label: "计量点",
            prop: "dayCost",
          },
          {
            label: "变动金额",
            prop: "tenantId",
            slot: true,
          },
          {
            label: "账户余额",
            prop: "dayCost",
          },
          {
            label: "费用类型",
            prop: "dayCost",
          },
          {
            label: "费用描述",
            prop: "dayCost",
          },
        ],
      },
      page: {
        currentPage: 1,
        total: 0,
        pageSize: 10,
      },
      activeName: "income",
      time: [new Date(2020, 9, 10), new Date(2020, 9, 10)],
      room: "",
      data: {},
      balance: 0,
      contactMobile: "",
      contactName: "",
      accountName: "",
      deviceId: "",
      accountId: "",
      dialogVisible: false,
      form: {
        amount: "",
        remarks: "",
      },
      roomData: {},
      formLabelWidth: "100px",
      memberList: [],
      rules: {
        amount: [
          { required: true, message: "请输入充值金额", trigger: "blur" },
          { validator: checkAmount, trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getCurrentMonthFirst();
    if (this.$route.query.data) {
      console.log(this.$route.query.data);
      this.data = this.$route.query.data;
      this.getCheckFee(this.$route.query.accountId);
      this.getFeeDetailList(this.page, {
        accountId: this.$route.query.accountId,
      });
    }
  },
  computed: {
    residual() {
      return Number(this.balance) + Number(this.form.amount);
    },
  },
  watch: {},
  methods: {
    // 初始化日期
    getCurrentMonthFirst() {
      var date = new Date();
      date.setDate(1);
      console.log(" date.setDate(1);", date.getDate(1));
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      this.time = [
        date.getFullYear() + "-" + month + "-" + day,
        dateFormat(new Date(), "yyyy-MM-dd"),
      ];
      console.log("tttt", this.time);
    },
    // 打印
    print() {
      window.print();
    },
    // 更改时间
    getTime() {
      this.getFeeDetailList(this.page, {
        accountId: this.$route.query.accountId,
      });
    },
    // gotoCostDetail() {
    //   this.$router.push({
    //     path: "/room/costDetail",
    //     query: { id: this.$route.query.id },
    //   });
    // },
    // 获取数据
    getCheckFee(id) {
      getCheckFee(id).then((res) => {
        console.log("getCheckFee", res.data.data);
        this.balance = res.data.data.balance;
        this.contactMobile = res.data.data.contactMobile;
        this.contactName = res.data.data.contactName;
        this.accountName = res.data.data.accountName;
        this.accountId = this.$route.query.accountId;
      });
    },
    // 充值
    getRecharge() {
      let obj = {
        amount: this.form.amount,
        accountId: this.accountId,
        chargeTarget: 1,
        chargeType: 4,
        device: this.deviceId,
        checkStatus: 1,
        remarks: this.form.remarks,
      };
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          getRecharge(obj).then((res) => {
            console.log(res.data);
            this.$notify({
              message: res.data.msg,
              type: "success",
            });
            console.log("getRecharge", obj);
            this.dialogVisible = false;
            this.getCheckFee(this.$route.query.accountId);
          });
        } else {
          return false;
        }
      });
    },
    // 关闭弹窗
    handleClose(done) {
      if (this.$refs["ruleForm"]) {
        this.$refs["ruleForm"].resetFields();
      }
      done();
    },

    // 分页
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
      this.getFeeDetailList(this.page, { roomId: this.$route.query.id });
    },
    //分页
    currentChange(val) {
      this.page.currentPage = val;
      this.getFeeDetailList(this.page, { roomId: this.$route.query.id });
    },
    //收支数据
    getFeeDetailList(page, params = {}) {
      if (this.activeName == "income") {
        params.type = 1;
      } else if (this.activeName == "spend") {
        params.type = 2;
      }
      params.startDate = this.time[0];
      params.endDate = this.time[1];
      getFeeDetailList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        console.log("getFeeDetailList");
        const data = res.data.data;
        this.page.total = data.total;
        this.data1 = data.records;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box_card {
  margin-bottom: 20px;
}
.box1 {
  border: 1px solid #ccc !important;
  .box1_conent {
    text-align: center;
    border-right: 1px solid #ccc;

    h2 {
      color: rgb(42, 188, 84);
    }
  }
  .box1_conent:nth-child(3) {
    border: 0;
  }

  .box1_number {
    font-size: 28px;
    margin-top: 0;
    color: #2abc54;
  }

  .box1_conent_img {
    line-height: 80px;
    text-align: center;
    img {
      width: 40px;
      height: 40px;
    }
  }
}

.box2 {
  padding: 10px 20px;
}

.box3 {
  /deep/.avue-crud__menu {
    display: none;
  }
}

.diao {
  /deep/.el-dialog__body {
    border-top: solid 1px #000 !important;
  }
}
</style>